//@flow

/**
 * 加载动画
 */
import React, { Component } from 'react';
import { 
    Image,
    View,
    Animated,
    Text,
    StyleSheet,
 } from 'react-native';
import { LoadingBgBlock } from './loadingBgBlock';
type State = {
    offsetX : Animated.Value,
}
const BG_COLOR :string= 'gray';
const LINEAR_WIDTH :number= 50;
const CONTENT_WIDTH:number= 150;//图片内容的宽度
const CONTENT_HEIGHT:number=50;//图片内容的高度
const TIME_LONG = 1000;//动画一次的时间
export class Loading extends Component <{},State>{
    /**初始化state */
    state : State = {
        offsetX : new Animated.Value(-LINEAR_WIDTH),
    }
    /**开始动画 */
    startAnimated(){
        Animated.timing(
            this.state.offsetX,
            {
                toValue:CONTENT_WIDTH,
                duration:TIME_LONG,
            }
        ).start(()=>{
            this.setState({offsetX:new Animated.Value(0)},()=>{
                this.startAnimated()
            })
        })
    }
    /**生命周期函数 */
    componentDidMount(){
        this.startAnimated()
    }
    render(){
        return (
            <View style={styles.container}>
                 <Animated.View style={[styles.animatedBlock,{left:this.state.offsetX}]}>
                     <LoadingBgBlock />
                 </Animated.View>
                 {/* 图片 */}
                 <Image style={styles.img} source={require('../../resource/loadingPlaceholder.png')}/>
                 
            </View>
        )
    }
}

const styles = StyleSheet.create({
    img:{
        width:CONTENT_WIDTH,
        height:CONTENT_HEIGHT,
    },
    animatedBlock:{
        position: 'absolute',
        width:LINEAR_WIDTH,
        height:'100%'
    },
    container:{
        height:CONTENT_HEIGHT,
        overflow: 'hidden',
        width:CONTENT_WIDTH,
    }
})